---
interface Props {
  label?: string;
  title: string;
  subtitle?: string;
}

const { label, title, subtitle } = Astro.props;
---

<div class="mb-20 flex flex-col items-center text-center">
  {
    label ? (
      <div class="text-gradient_indigo-purple mb-4 font-semibold">{label}</div>
    ) : null
  }
  <h2 class="font-heading text-3xl md:text-4xl lg:text-[40px]">
    {title}
  </h2>

  <p class="text-muted-foreground mt-6 text-balance text-lg">
    <slot name="subtitle" />{subtitle}
  </p>
</div>
